<style lang='scss' scoped>
@import "@/assets/css/variable";
.apply-list {
  padding: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .header-box {
    // border-bottom: 1px solid $border-c;
    background-color: white;
    border-radius: 8px;
    padding: 0 12px;
    margin-bottom: 12px;
    .title {
      padding-top: 1.2rem;
      // padding-left: 1.7rem;
      padding-right: 1.7rem;
    }
    .van-cell {
      padding: 15px 0;
    }
  }
  .list-box {
    background-color: white;
    border-radius: 8px;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.7rem;
      border-bottom: 1px solid $border-c;
      .flex {
        margin-right: 18px;
      }
    }
  }
}
</style>
<template>
  <div class="apply-list">
    <BarNav></BarNav>
    <div class="header-box">
      <div class="title fs-18 t-bold">{{ activityItem.title }}</div>
      <div>
        <van-cell :title="`当前共计${listNum}个团`" />
      </div>
    </div>
    <div class="list-box" v-if="list && list.length > 0">
      <div v-for="(item, index) in list" :key="index">
        <div class="item">
          <div>
            <span class="flex" style="color: #afafaf">000{{ index + 1 }}</span>
            <span style="color: #dd663c">{{ item.status == 2 ? "拼团成功" : "拼团中" }}</span>
          </div>
          <span style="color: #afafaf"
            >{{ item.children.length + item.val.length }}/{{
              item.group_num
            }}</span
          >
        </div>
        <div class="item">
          <div>
            <span class="flex" style="color: #727272">团长</span>
            <span>{{ item.val[0].name }}</span>
          </div>
          <a :href="`tel:${item.val[0].mobile}`">{{ item.val[0].mobile }}</a>
          <!-- <span style="color: #407eb8">{{ item.val[0].mobile }}</span> -->
        </div>
        <div class="item" v-for="(item1, i) in item.children" :key="i">
          <div>
            <span class="flex" style="color: #9f9f9f">团员</span>
            <span>{{ item1.val[0].name }}</span>
          </div>
          <a :href="`tel:${item1.val[0].mobile}`">{{ item1.val[0].mobile }}</a>
          <!-- <span style="color: #407eb8">{{ item1.val[0].mobile }}</span> -->
        </div>
      </div>
    </div>
    <!-- <div class="no-data padding-all" v-else>暂无报名信息</div> -->
    <van-empty v-else description="暂无数据" />
    <div></div>
  </div>
</template>

<script>
import { Cell, ActionSheet, Empty } from "vant";
import BarNav from "@/components/BarNav";
export default {
  components: {
    [Cell.name]: Cell,
    [ActionSheet.name]: ActionSheet,
    [Empty.name]: Empty,
    BarNav,
  },
  data() {
    return {
      showAction: false,
      upDown: "down",
      list: [],
      listNum: 0,
      actions: [{ name: "全部" }, { name: "未付款" }, { name: "已付款" }],
      status: "",
      statusName: "全部",
      listOld: "",
      activityItem: "",
    };
  },
  mounted() {
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid;
    }
    this.activityItem = this.$store.state.activityItem;
    if (!this.activityItem) {
      this.$router.replace("/manage");
      return;
    }
    // this.list = JSON.parse(this.$store.state.activityItem.apply_list);
    // this.getOrderPage()
    this.getGroupmsg();
  },
  methods: {
    getGroupmsg() {
      let params = {
        activity_id: this.$store.state.activityItem.id,
        status: this.status,
        pageNo: 1,
        pageSize: 1000,
      };
      this.$request.getGroupmsg(params).then((res) => {
        this.list = res.data;
        this.listNum = this.list.length || 0;
        console.log(res.data);
      });
    },
    // getOrderPage() {
    //   let params = {
    //     activity_id: this.$store.state.activityItem.id,
    //     status: this.status,
    // 	pageNo:1,
    // 	pageSize: 1000
    //   };
    //   this.$request.getOrderPage(params).then((res) => {
    //     let list = res.data.data;
    //     list = list.map(res => {
    // 		if(res.val){
    // 			res.name = res.val[0].name
    // 			res.mobile = res.val[0].mobile
    // 			return res
    // 		}else{
    // 			res.name = res.fans_name
    // 			res.mobile = '---'
    // 			return res
    // 		}
    //     })
    //     this.list = list
    //     this.listOld = list;
    // 	this.listNum = this.list.length
    //   });
    // },
    // onSelect(item) {
    //   console.log("onselct", item);
    //   if (item.name == "全部") {
    //     this.status = "";
    //     this.list = this.listOld;
    //   } else if (item.name == "未付款") {
    //     this.status = 1;
    //     this.list = this.listOld.filter((res) => res.status == 1);
    //   } else if (item.name == "已报名") {
    //     this.status = 2;
    //     this.list = this.listOld.filter((res) => res.status == 2);
    //   }
    //   this.statusName = item.name;
    //   this.upDown = "down";
    // },
    // closePop() {
    //   this.upDown = "down";
    // },
    // isPopClick() {
    //   this.showAction = true;
    //   this.upDown = "up";
    // },
  },
};
</script>